<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<%@ include file="/app_css/app_layout.jsp"%>
<link href="http://static.aceona.com/api_demo/css/api_common.css" rel="stylesheet" type="text/css" />
</head>
<body class="bg_a">
<div class="api_com_position"> <span class="api_position_main">前端开发规范</span>|<span class="red_a">弹出层</span> </div>
<div class="api_content">   
	<table class="t_b" width="900" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td width="20%">组件名</td>
			<td>Ace.Widget.Dialog</td>
		</tr>
		<tr>
			<td>组件应用实例</td>
			<td><a class="J_dialog" href="javascript:void(0);">点击显示弹出框</a>
	         <div id="app_dialog" title="弹出框信息"></div></td>
		</tr>
		<tr>
			<td>author</td>
			<td>peter</td>
		</tr>
		<tr>
			<td>组件参数</td>
			<td>
			<pre><p>;$(function() {
	 $(&quot;.J_dialog&quot;).click( function() {
	  var $_self=$(this);
	  Ace.Widget.LoadMoudle({
	  Moudle:'Ace.Widget.Dialog',
	  callback: function() {	   	</p><p>    //$('#app_dialog')是dialog 的类名<br />     $('#app_dialog').dialog({	</p><p>     //这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口，知道.dialog(&quot;open&quot;)的时候才弹出dialog窗口。默认为：false。
      autoOpen:false,	</p><p>     //modal,是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口。<br />      modal:true,		</p><p>     //resizable是否可以改变dialog的大小，默认为true，可以改变大小;draggable是否可以使用标题头进行拖动，默认为true，可以拖动;<br />      resizable:false,			</p><p>     //窗口宽度<br />	   width:500,			</p><p>     //title，dialog的标题文字，默认为空。
      title:&quot;弹出框信息&quot;,				</p><p>     //open 类型：dialogopen ，当dialog打开时触发。<br />		open: function() {			</p><p>              //采用ajax调用外部文件<br />			   $.ajax({<br />                 //外部文件url       
               url: &quot;http://static.aceona.com/api_demo/api_inc/dialog_content.jsp&quot;,
                //请求发生前执行函数
				beforeSend: function() {
			    $(&quot;#app_dialog&quot;).addClass(&quot;loading&quot;);
				 	},
				cache:false,
				success: function(html) {
				$(&quot;#app_dialog&quot;).removeClass(&quot;loading&quot;).empty();
               //过滤url中需要的显示到dialog中的信息
				var $_result=$(html).filter(&quot;#content&quot;).removeClass(&quot;hidden&quot;);
				//设成不显示的
			    $_result.css({
					    &quot;opacity&quot;:0
					             });
				$_result.appendTo($('#app_dialog'));
					//fade in
				$_result.animate({
					    &quot;opacity&quot;:1
					              },&quot;slow&quot;);
				$(&quot;#app_dialog&quot;).css({
					    &quot;height&quot;:&quot;auto&quot;,
				    	&quot;overflow&quot;:&quot;hidden&quot;
					                });
			    $(&quot;#app_dialog&quot;).dialog({
				       position:'center'
						          });<br />					            }
						      });
						     } 
						  });
				$(&quot;#app_dialog&quot;).dialog('open');
						}
				   });
				});
			});</p></pre></td>
		</tr>
		<tr>
			<td>组件调用</td>
			<td><p>&lt;!--触发按钮--&gt;</p>
				<p>&lt;a class=&quot;J_dialog&quot; href=&quot;javascript:void(0);&quot;&gt;点击显示弹出框&lt;/a&gt;</p>
				<p>&lt;!--显示弹出框--&gt;<br />
			&lt;div id=&quot;app_dialog&quot; title=&quot;弹出框信息&quot;&gt;&lt;/div&gt;</p></td>
		</tr>
		<tr>
			<td>依赖文件</td>
			<td align="left">&lt;script type=&quot;text/ecmascript&quot; src=&quot;http://static.aceona.com/app_js/jquery.js&quot;&gt;&lt;/script&gt; <br />
				&lt;script type=&quot;text/javascript&quot; src=&quot;http://static.aceona.com/app_js/app_widgets/lazyload-min.js&quot;&gt;&lt;/script&gt; <br />
			&lt;script type=&quot;text/javascript&quot; src=&quot;http://static.aceona.com/app_js/app_widgets/app_widgets_moudle.js&quot;&gt;&lt;/script&gt;</td>
		</tr>
	</table>
</div>
<script type="text/javascript" src="http://static.aceona.com/app_js/jquery.js"></script> 
<script type="text/javascript" src="http://static.aceona.com/app_js/app_widgets/lazyload-min.js"></script> 
<script type="text/javascript" src="http://static.aceona.com/app_js/app_widgets/app_widgets_moudle.js"></script>
</body>
<script type="text/javascript">
;$(function() {
	   $(".J_dialog").click( function() {
        var $_self=$(this);
        Ace.Widget.LoadMoudle({
            Moudle:'Ace.Widget.Dialog',
            callback: function() {
                $('#app_dialog').dialog({
                    autoOpen:false,
                    modal:true,
                    resizable:false,
                    width:500,
                    title:"弹出框信息",
                    open: function() {
                        $.ajax({
                            url: "http://static.aceona.com/api_demo/api_inc/dialog_content.jsp",
                            beforeSend: function() {
                                $("#app_dialog").addClass("loading");
                            },
                            cache:false,
                            success: function(html) {
                                $("#app_dialog").removeClass("loading").empty();
                                var $_result=$(html).filter("#content").removeClass("hidden");
                                //设成不显示的
                                $_result.css({
                                    "opacity":0
                                });
                                $_result.appendTo($('#app_dialog'));
                                //fade in
                                $_result.animate({
                                    "opacity":1
                                },"slow");
                                $("#app_dialog").css({
                                    "height":"auto",
                                    "overflow":"hidden"
                                });
                                $("#app_dialog").dialog({
                                    position:'center'
                                });
                            }
                        });
                    }
                });
                $("#app_dialog").dialog('open');
            }
       	 });
    	});
	});
</script>
</html>
